<template>
	<view class="">
		<view class="content" v-if="id==1">
			<!-- 示例代码 开始-->
			<navbar type="ordinary">不固定导航</navbar>
			<!---示例代码 结束---->
			<image class="image" src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image class="image" src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image class="image" src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image class="image" src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image class="image" src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image class="image" src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==2">
			<!-- 示例代码 开始-->
			<navbar  type="transparent" fontColor="#FFF">透明导航</navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==3">
			<!-- 示例代码 开始-->
			<navbar home :bgColor="['#f37402','#0f0']" fontColor="#FFF" title="颜色渐变导航"></navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==4">
			<!-- 示例代码 开始-->
			<navbar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==5">
			<!-- 示例代码 开始-->
			<navbar home bgColor="#f37402" fontColor="#FFF" :titleCenter="false" title="案例展示4"></navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==6">
			<!-- 示例代码 开始-->
			<navbar title="分享出去的页面效果"></navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==7">
			<!-- 示例代码 开始-->
			<navbar  title="左插槽-地址选择">
				<view slot="left" class="address_select">深圳市</view>
			</navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==8">
			<!-- 示例代码 开始-->
			<navbar title="中插槽-搜索框">
				<view class="search_boxz">
					<text class="icon_search"></text>
					<text class="prompt">搜索目的地/职位等</text>
				</view>
			</navbar>
			<!---示例代码 结束-->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==9">
			<!-- 示例代码 开始-->
			<navbar title="右插槽-搜索图标">
				<view slot="right" class="search_boxy"></view>
			</navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		<view class="content" v-if="id==10">
			<!-- 示例代码 开始-->
			<navbar home :bgColor="bgColor" :fontColor="fontColor" :title="title"></navbar>
			<!---示例代码 结束---->
			<image src="../../static/tab/2.jpg" mode="widthFix"></image>
			<image src="../../static/tab/1.jpg" mode="widthFix"></image>
			<image src="../../static/tab/3.jpg" mode="widthFix"></image>
			<image src="../../static/tab/4.jpg" mode="widthFix"></image>
			<image src="../../static/tab/5.jpg" mode="widthFix"></image>
			<image src="../../static/tab/6.jpg" mode="widthFix"></image>
		</view>
		
	</view>

</template>

<script>
	import navbar from "../../components/tabbar";
	export default {
		components:{navbar},
		data() {
			return {
				id:0,
				bgColor:"#FFF",
				fontColor:"#000",
				title:"案例展示9",
				bgColorList:[
					{
						color:"#f37402",
						scale:"0%"
					},
					{
						color:"#0f0",
						scale:"20%"
					},
					{
						color:"#f00",
						scale:"80%"
					},
					{
						color:"#00f",
						scale:"100%"
					}
				]
			}
		},
		onLoad(options) {
			this.id=options.id;
			if(this.id==10){
				this.changeColor(1);
			}
		},
		methods: {
			changeColor(type){
				setTimeout(() => {
					if(type == 1){
						this.bgColor = "#f37402";
						this.fontColor = "#FFF";
						this.title = "案例展示9";
						this.changeColor(2);
					}else{
						this.bgColor = "#FFF";
						this.fontColor = "#000";
						this.title = "案例展示9-9";
						this.changeColor(1);
					}
				},2000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0;
		image {
			width: 100%;
			display: block;
		}
	}
	image {
		width: 100%;
		display: block;
	}
	// 左插槽css
	.address_select {
		padding-left: 76upx;
		font-size: 32upx;
		display: flex;
		align-items: center;
		color: #333333;
		background-image: url('../../static/tab/icon_location.png');
		background-position: 30upx center;
		background-repeat: no-repeat;
		background-size: auto 90%;
	}
	//右插槽css
	.search_boxy {
		width: 35upx;
		height: 35upx;
		background-image: url('../../static/tab/home_ic_search.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 15upx;
	}
	// 中插槽css
	.search_boxz {
		margin-right: 30upx;
		width: 300upx;
		height: 64upx;
		background-color: #f5f5f5;
		border-radius: 32upx;
		display: flex;
		align-items: center;
		padding: 0upx 40upx;
	
		.prompt {
			font-size: 28upx;
			color: #cccccc;
		}
		.icon_search {
			background-image: url('../../static/tab/map_ic_search.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 29upx;
			height: 28upx;
			margin-right: 20upx;
		}
	}
</style>
